<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>
            Advanced grid
        </title>
        <meta name="description" content="">
        <meta name="author" content="ink, cookbook, recipes">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="shortcut icon" href="../img/ink-favicon.ico">
        <link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
        <link rel="apple-touch-startup-image" href="../img/splash.320x460.png"
        media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.768x1004.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.1024x748.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
        <link rel="stylesheet" type="text/css" href="../css/ink.css">
        
        <!--[if IE 7 ]>
            <link rel="stylesheet" href="../css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <![endif]-->
        
        <script type="text/javascript" src="../js/holder.js"></script>
        <script type="text/javascript" src="../js/ink.min.js"></script>
        <script type="text/javascript" src="../js/ink-ui.min.js"></script>
        <script type="text/javascript" src="../js/autoload.js"></script>
        <script type="text/javascript" src="../js/html5shiv.js"></script>
        
        
        <style type="text/css">
            body {
                background: #ededed;
            }
            header {
                padding: 2em 0;
                margin-bottom: 2em;
                border-bottom: 1px solid #cecece;
                overflow: hidden;
            }
            header h1 {
                font-size: 2em;
            }
            header h1 small:before  {
                content: "|";
                margin: 0 0.5em;
                font-size: 1.6em;
            }
            footer {
                background: #ccc;
                color: #000;
            }
            footer a {
                color: #000;
            }
            footer p {        
                padding: 0.5em 1em 0.5em 0;
                margin: 0;        
            }
            .bottom-border {
                border-bottom: 1px solid #cecece;
            }
        </style>
    </head>
    
    <body>
        <div class="ink-grid">
            <header>
                <h1 class="pull-left medium-100 small-100">
                    <div class="logo">
                        <a href="#">
                            <img src="holder.js/150x80/auto/ink" alt="">
                        </a>
                    </div>
                </h1>
                <nav class="ink-navigation pull-right medium-100 small-100">
                    <ul class="menu horizontal black flat">
                        <li class=""active><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                    </ul>
                </nav>             
            </header>
            <div class="column-group">
                <div class="large-100 medium-100 small-100">
                    <img src="holder.js/1200x300/ink/auto">
                </div>
            </div>
            <h1>heading</h1>
            <div class="column-group gutters">
                <div class="large-50 medium-100 small-100">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-25 medium-50 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
                <div class="large-25 medium-50 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
            </div>            
            <div class="column-group gutters">
                <div class="large-50 medium-100 small-100">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-25 medium-50 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
                <div class="large-25 medium-50 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
            </div>
            <h2>heading</h2>
            <div class="column-group gutters">
                <div class="large-33 medium-33 small-100">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
                <div class="large-33 medium-33 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
                <div class="large-33 medium-33 small-50">
                    <img src="holder.js/600x480/ink/auto">
                    <p>"Sit down," Edwin counselled soothingly. "Granser's all right. He's just  gettin' to the Scarlet Death, ain't you, Granser? He's just goin' to  tell us about it right now. Sit down, Hare-Lip. Go ahead, Granser."</p>
                </div>
            </div>
            <div class="column-group gutters">
                <div class="large-20 medium-25 small-50">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-20 medium-25 small-50">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-20 medium-25 small-50">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-20 medium-25 small-50">
                    <img src="holder.js/960x640/ink/auto">
                </div>
                <div class="large-20 hide-small hide-medium">
                    <img src="holder.js/960x640/ink/auto">
                </div>
            </div>
        </div>
        <footer>
        <div class="ink-grid">
            <nav class="ink-navigation push-left small-100 small-push-left">
                <ul class="menu horizontal">
                    <li class=""active><a href="#">Welcome</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
            <p class="push-right small-100">copyright © photoguy</p>
        </div>
        </footer>
    </body>

</html>
